<template>
  <Pannel
    ref="oPannel"
    title="首页"
    @refresh="handleRefresh"
    @load="handleLoad"
  >
    <view class="pannel-inner-box">
      <image class="bg" :src="bg" :style="{ width: '100%' }" mode="widthFix" />
      <PickerYear
        class="picker-year"
        :initYear="curYear"
        @change="handlleChangeYear"
      ></PickerYear>

      <view class="content-box">
        <view class="area-1">
          <view class="content-1">
            <view class="content-1-left">
              <view class="profile-picture">
                <image
                  v-if="userInfo.tx"
                  class="image"
                  :src="joinUrl(userInfo.tx)"
                  mode="scaleToFill"
                />
                <image
                  v-else
                  class="image"
                  src="@/static/images/default_avator.svg"
                  mode="scaleToFill"
                />
              </view>
              <view class="user-msg">
                <view class="name">你好，{{ userInfo.xm || "" }}</view>
                <view class="ident">高新四支部党员</view>
              </view>
            </view>
            <view class="content-1-right">
              <view class="out-btn" @click="exitSoft">
                <view class="icon iconfont icon-h"></view>
                <view class="text">退出</view>
              </view>
            </view>
          </view>
          <view class="content-2"></view>
          <view class="content-3">
            <view
              class="content-3-item"
              @click="onJump({ url: '/subPack/lzqk/index' })"
            >
              <image class="image" :src="card_1" mode="scaleToFill" />
              <view class="text">履职情况</view>
            </view>
            <view
              class="content-3-item"
              @click="onJump({ url: '/subPack/zbhd/index' })"
            >
              <image class="image" :src="card_2" mode="scaleToFill" />
              <view class="text">参与支部活动</view>
            </view>
          </view>
        </view>
        <view class="area-2">
          <!-- 党员信息总览 -->
          <view
            class="area-2-left"
            @click="onJump({ url: '/subPack/dyxs/index' })"
          >
            <image class="image" :src="card_3" mode="scaleToFill" />
            <view class="title">党员信息总览</view>
            <view class="msg">
              <view class="text">党员总数</view>
              <view class="num">{{ homeData.dyxsCount || 0 }}</view>
            </view>
          </view>
          <view class="area-2-right">
            <!-- 参政议政 -->
            <view
              class="right-item"
              @click="onJump({ url: '/subPack/czyz/index' })"
            >
              <image class="image" :src="card_4" mode="scaleToFill" />
              <view class="msg">
                <view class="text">总数</view>
                <view class="num">{{ homeData.czyzCount || 0 }}</view>
              </view>
            </view>
            <!-- 社情民意 -->
            <view
              class="right-item"
              @click="onJump({ url: '/subPack/sqmy/index' })"
            >
              <image class="image" :src="card_5" mode="scaleToFill" />
              <view class="msg">
                <view class="text">总数</view>
                <view class="num">{{ homeData.sqmyCount || 0 }}</view>
              </view>
            </view>
          </view>
        </view>
        <view class="area-3">
          <!-- 宣传文章 -->
          <view
            class="area-3-item"
            @click="onJump({ url: '/subPack/xcwz/index' })"
          >
            <image class="image" :src="card_6" mode="scaleToFill" />
            <view class="msg">
              <view class="text">总数</view>
              <view class="num">{{ homeData.scwzCount || 0 }}</view>
            </view>
          </view>
          <!-- 宣传报道 -->
          <view
            class="area-3-item"
            @click="onJump({ url: '/subPack/xcbd/index' })"
          >
            <image class="image" :src="card_7" mode="scaleToFill" />
            <view class="msg">
              <view class="text">总数</view>
              <view class="num">{{ homeData.xcbdCount || 0 }}</view>
            </view>
          </view>
        </view>
        <view class="area-4">
          <!-- 社会服务 -->
          <view
            class="area-4-item"
            @click="onJump({ url: '/subPackB/shfw/index' })"
          >
            <image class="image" :src="card_8" mode="scaleToFill" />
            <view class="msg">
              <view class="text">总数</view>
              <view class="num">{{ homeData.shfwCount || 0 }}</view>
            </view>
          </view>
          <!-- 扶贫工作 -->
          <view
            class="area-4-item"
            @click="onJump({ url: '/subPackB/fpgz/index' })"
          >
            <image class="image" :src="card_9" mode="scaleToFill" />
            <view class="msg">
              <view class="text">总数</view>
              <view class="num">{{ homeData.fpgzCount || 0 }}</view>
            </view>
          </view>
          <!-- 祖统工作 -->
          <view
            class="area-4-item"
            @click="onJump({ url: '/subPackB/ztgz/index' })"
          >
            <image class="image" :src="card_10" mode="scaleToFill" />
            <view class="msg">
              <view class="text">总数</view>
              <view class="num">{{ homeData.ztgzCount || 0 }}</view>
            </view>
          </view>
          <!-- 组织活动 -->
          <view
            class="area-4-item"
            @click="onJump({ url: '/subPackB/zzhd/index' })"
          >
            <image class="image" :src="card_11" mode="scaleToFill" />
            <view class="msg">
              <view class="text">总数</view>
              <view class="num">{{ homeData.zzhdCount || 0 }}</view>
            </view>
          </view>
          <!-- 组织发展 -->
          <view
            class="area-4-item"
            @click="onJump({ url: '/subPackB/zzfz/index' })"
          >
            <image class="image" :src="card_12" mode="scaleToFill" />
            <view class="msg">
              <view class="text">总数</view>
              <view class="num">{{ homeData.zzfzCount || 0 }}</view>
            </view>
          </view>
          <!-- 获奖情况-->
          <view
            class="area-4-item"
            @click="onJump({ url: '/subPackB/hjqk/index' })"
          >
            <image class="image" :src="card_13" mode="scaleToFill" />
            <view class="msg">
              <view class="text">总数</view>
              <view class="num">{{ homeData.hjqkCount || 0 }}</view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </Pannel>
</template>

<script lang="ts" setup>
import bg from "./static/base64/bg";
import card_1 from "./static/base64/card_1";
import card_2 from "./static/base64/card_2";
import card_3 from "./static/base64/card_3";
import card_4 from "./static/base64/card_4";
import card_5 from "./static/base64/card_5";
import card_6 from "./static/base64/card_6";
import card_7 from "./static/base64/card_7";
import card_8 from "./static/base64/card_8";
import card_9 from "./static/base64/card_9";
import card_10 from "./static/base64/card_10";
import card_11 from "./static/base64/card_11";
import card_12 from "./static/base64/card_12";
import card_13 from "./static/base64/card_13";
import card_14 from "./static/base64/card_14";
import card_15 from "./static/base64/card_15";

import { joinUrl } from "@/utils/tools";
import { useYearList, useUserInfo } from "@/store/index";
import useDetail from "@/store/detail";
import { requestPost, requsetAll } from "@/hooks/api";
import { onLaunch, onShow, onHide } from "@dcloudio/uni-app";
import { watch } from "vue";

const oPannel = ref(null) as any;

//  党员信息总览
const [data1, fetchData1] = requestPost("/ascreen/home/dyInfo/ajax");
//  参政议政
const [data2, fetchData2] = requestPost("/ascreen/home/czyyzHome/ajax");
//  社情民意
const [data3, fetchData3] = requestPost("/ascreen/home/sqmyDetailHome/ajax");
//  宣传文章
const [data4, fetchData4] = requestPost("/ascreen/home/xcwzHomeList/ajax");
//  宣传报道
const [data5, fetchData5] = requestPost("/ascreen/home/xcbdDetailHome/ajax");
//  社会服务
const [data6, fetchData6] = requestPost("/ascreen/home/shfwHomeApp/ajax");
//  扶贫工作
const [data7, fetchData7] = requestPost("/ascreen/home/fpgzHomeList/ajax");
//  祖统工作
const [data8, fetchData8] = requestPost("/ascreen/home/ztgzHomeListApp/ajax");
//  组织活动
const [data9, fetchData9] = requestPost("/ascreen/home/swhhdHome/ajax");
//  组织发展
const [data10, fetchData10] = requestPost("/ascreen/home/zzfzHomeApp/ajax");
//  获奖情况
const [data11, fetchData11] = requestPost("/ascreen/home/gzhjHomeCount/ajax");
//  用户基本信息
const [data12, fetchData12] = requestPost("/ascreen/home/loginInfo/ajax");
//  年份选择框数据
const [data13, fetchData13] = requestPost("/ascreen/home/lastYear/ajax");
//  判断当前登录的用户是不是管理员
const [ data14, fetchData14 ] = requestPost("/ascreen/home/admin/ajax");

const [, setDetail] = useDetail();

const onJump: any = (data: any = {}) => {
  setDetail(curYear.value || "2025");
  data.url = data.url + `?year=${ curYear.value }`;
  uni.navigateTo(data);
};

const curYear = ref("2025") as any;

const [, setYearList] = useYearList();

const handlleChangeYear = (year: any) => {
  curYear.value = year;
};

watch(curYear, () => {
  oPannel.value?.dataLoad(fetchAll);
});

//  用来判断当前登录的用户是不是管理员
const [data, fetchData] = requestPost();

const homeData = ref({}) as any;
const handleRefresh = async (callback: any) => {
    homeData.value = {}; //
  await callback(fetchAll);
};

const handleLoad = async (callback: any) => {
  homeData.value = {}; //
  await callback(fetchAll);
};

const [userInfo, setUserInfo] = useUserInfo();

console.log(userInfo)

function formatHomeData() {
  homeData.value = {
    dyxsCount: data1.value.dyrs,
    zxwyrs: data1.value.zxwyrs,
    czyzCount: data2.value.personCount,
    sqmyCount: data3.value.hzMap?.all,
    xcwzCount: data4.value.wzCount,
    xcbdCount: data5.value.hzMap?.all,
    shfwCount: data6.value.fwCount,
    fpgzCount: data7.value.personDataList?.length,
    ztgzCount: data8.value.peopleCount,
    zzhdCount: data9.value.eventCount,
    zzfzCount: data10.value.allFzCount,
    hjqkCount: data11.value.allCount,
  };

  //  将用户信息进行保存 - 共后面的页面调取使用
  setUserInfo({ ...data12.value, ...data14.value });
}

//  请求所有接口
async function fetchAll() {
  //  先获取日期 - 然后设置完日期之后在进行数据请求
  await fetchData13();
  setYearList(data13.value.rangeYear);

  const arr: any[] = [
    fetchData1,
    fetchData2,
    fetchData3,
    fetchData4,
    fetchData5,
    fetchData6,
    fetchData7,
    fetchData8,
    fetchData9,
    fetchData10,
    fetchData11,
    fetchData12,
    fetchData14
  ].map((_s) => {
    return _s({ year: curYear.value });
  });

  await requsetAll(arr);

  //  加工数据
  formatHomeData();
}

const exitSoft = () => {
  uni.exitMiniProgram({
    success: function () {
      uni.clearStorageSync();
      console.log("退出小程序成功");
    },
    fail: function (err) {
      console.log("退出小程序失败", err);
    },
  });
};
</script>

<style lang="scss" scoped>
.image {
  width: 100%;
  height: 100%;
}

.pannel-inner-box {
  position: relative;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: 60rpx;
  width: 100%;
  height: 100%;

  .bg {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
  }

  //   切换日期按钮
  .picker-year {
    position: absolute;
    top: 228rpx;
    left: 64rpx;
    z-index: 100;
  }

  .content-box {
    margin-top: 334rpx;
    z-index: 1;

    .area-1 {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 686rpx;
      height: 458rpx;
      background: linear-gradient(180deg, #ffebce, #fdfbf4);
      border-top: 8rpx solid #dda783;
      border-radius: 4px;
      box-sizing: border-box;

      .content-1 {
        display: flex;
        justify-content: space-between;
        width: 100%;
        padding: 0 40rpx;
        box-sizing: border-box;

        .content-1-left {
          margin-top: 32rpx;
          display: flex;
          align-items: center;

          .profile-picture {
            width: 108rpx;
            height: 108rpx;
            border: 2rpx solid #ffffff;
            border-radius: 50%;
            overflow: hidden;
          }

          .user-msg {
            margin-left: 20rpx;

            .name {
              font-size: 30rpx;
              color: #333333;
              font-weight: bold;
            }

            .ident {
              margin-top: 6rpx;
              font-size: 26rpx;
              color: #666666;
            }
          }
        }

        .content-1-right {
          margin-top: 32rpx;

          .out-btn {
            display: flex;
            align-items: center;
            color: #a57d62;

            .icon {
              font-size: 36rpx;
            }

            .text {
              font-size: 26rpx;
            }
          }
        }
      }

      .content-2 {
        margin-top: 32rpx;
        width: 622rpx;
        height: 68rpx;
        opacity: 0.6;
        background: #ffffff;
        border-radius: 8rpx;
      }

      .content-3 {
        display: flex;
        width: 100%;

        .content-3-item {
          flex: 1;
          display: flex;
          flex-direction: column;
          align-items: center;
          margin-top: 20rpx;

          .image {
            width: 160rpx;
            height: 142rpx;
          }

          .text {
            margin-top: -20rpx;
            font-size: 24rpx;
            color: #333333;
          }
        }
      }
    }

    .area-2 {
      position: relative;
      display: flex;
      margin-top: 24rpx;
      width: 686rpx;
      height: 242rpx;
      justify-content: space-between;

      .area-2-left {
        position: relative;
        width: 332rpx;
        height: 242rpx;

        .title {
          position: absolute;
          left: 32rpx;
          top: 38rpx;
          font-size: 30rpx;
          font-weight: bold;
          color: #333333;
        }

        .msg {
          position: absolute;
          left: 32rpx;
          top: 88rpx;
          display: flex;
          font-size: 24rpx;
          color: #666666;

          .num {
            margin-left: 6rpx;
          }
        }
      }

      .area-2-right {
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        .right-item {
          position: relative;
          width: 332rpx;
          height: 110rpx;

          .msg {
            position: absolute;
            top: 42rpx;
            left: 172rpx;
            display: flex;
            font-size: 24rpx;
            color: #666666;

            .num {
              margin-left: 8rpx;
            }
          }
        }
      }
    }

    .area-3 {
      display: flex;
      justify-content: space-between;
      margin-top: 22rpx;
      width: 686rpx;

      .area-3-item {
        position: relative;
        width: 332rpx;
        height: 144rpx;

        .msg {
          position: absolute;
          top: 78rpx;
          left: 32rpx;
          display: flex;
          font-size: 24rpx;
          color: #666666;

          .num {
            margin-left: 8rpx;
          }
        }
      }
    }

    .area-4 {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      width: 686rpx;

      .area-4-item {
        position: relative;
        margin-top: 22rpx;
        width: 214rpx;
        height: 142rpx;

        .msg {
          position: absolute;
          left: 32rpx;
          top: 82rpx;
          display: flex;
          font-size: 24rpx;
          color: #666666;

          .num {
            margin-left: 8rpx;
          }
        }
      }
    }
  }
}
</style>
